<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jq/jquery1.9/jquery-1.9.0.js"></script>
    <style>
        .bg1 {
            width: 400px;
            height: 400px;
            background-color: red;
        }

        .bg2 {
            color: yellow;
        }

        .bg3 {
            font-size: 50px;
        }
    </style>
</head>

<body>

    <input type="button" value="设置样式" class="btn1">
    <input type="button" value="设置内容" class="btn2">
    <input type="button" value="设置属性" class="btn3">
    <input type="button" value="设置属性" class="btn4">
    <div id="mydiv" class="bg1">
        mydiv
    </div>
    <div id="mydiv2">
        <p>pp</p>
    </div>
    <input type="text" id="username" hello="world">
    <input type="checkbox" >吃饭
    <script>
        /*  
         1.通过css的方式来设置
             jQuery对象.css("样式名", "样式值");
             jQuery对象.css("样式名", "样式值").css("样式名", "样式值").css("样式名", "样式值");
             jQuery对象.css(对象);
         2.通过addClass的方式来设置
             jQuery对象.addClass("类名1 类名2");
             删除样式
             jQuery对象.removeClass("类名1 类名2");
 
         3.jQuery对象.html()获取标签中的内容
           jQuery对象.html(内置)设置标签中的内容
           类似于js中的innerHTML

           jQuery对象.text()获取标签中的内容
           jQuery对象.text(内置)设置标签中的内容
           类似于js中的innerText


           4.设置属性
            jQuery对象.attr("属性名")根据属性名来获取对应的值
            jQuery对象.attr("属性名","属性值")设置属性名和值
            jQuery对象.attr(对象)设置多个属性名和值
            jQuery对象.removeAttr("属性名") 根据属性名删除属性

            jQuery对象.prop("属性名")
             jQuery对象.prop("属性名",布尔值)

             
         */

        $(".btn1").click(function () {
            $("#mydiv").addClass("bg2 bg3");//添加类样式
            $("#mydiv").removeClass("bg1 bg3");//删除类样式
        });
        $(".btn2").click(function () {
            //console.log( $("#mydiv2").html());//获取完整的标签
            //$("#mydiv2").html("<p class='hehe'>xixi</p>");//解析了标签
            // console.log( $("#mydiv2").text());//输出纯文本
            $("#mydiv2").text("<p class='hehe'>xixi</p>");//不解析成标签
            // 区别：类似于innerHTML和innerText

        });

        $(".btn3").click(function () {
            // jQuery对象.attr("属性名")根据属性名来获取对应的值
            // jQuery对象.attr("属性名", "属性值")设置属性名和值
            // jQuery对象.attr(对象)设置多个属性名和值
            // jQuery对象.removeAttr("属性名") 根据属性名删除属性

            // console.log($("#username").attr("id"));//根据属性名获取对应的值
            // console.log($("#username").attr("hello"));//根据属性名获取对应的值
            // $("#username").attr("name","xixi");//设置属性名和值
            $("#username").attr({//设置多个属性名和值
                "name": "xixi",
                "hehe": "haha"
            });
            $("#username").removeAttr("name");//删除属性
        });
        $(".btn4").click(function () {
          
            console.log($("input[type='checkbox']").prop("checked"));//获取属性，true表示选中，false表示未选中
            // $("input[type='checkbox']").prop("checked",true);//设置被选中
        });
    </script>
</body>

</html>